<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<base href="<{$B_Url}>" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>在线客服系统</title>
	<load href="__PUBLIC__/bootstrap/css/bootstrap.min.css" />
	<load href="__PUBLIC__/bootstrap/css/bootstrap-theme.min.css" /> 
	<load href="__PUBLIC__/bootstrap/js/jquery.min.js" />
	<load href="__PUBLIC__/bootstrap/js/bootstrap.min.js" /> 
    <link rel="stylesheet" href="__PUBLIC__/index/css/kf.css" /> 
    <link rel="stylesheet" href="__PUBLIC__/index/css/kefu.css" /> 
    <script type="text/javascript" src="__PUBLIC__/index/js/jquery.form.js" ></script> 

</head>
<style type="text/css">
	#img{background: url(__PUBLIC__/index/image/bg.jpg) no-repeat; left:0px; top:0px; width:100%; height:100%; background-size: 100% 100%; z-index:-1; position: fixed;}
</style>
<body>
<div  id="img"></div>
<input type="hidden" id="openid" name="openid" value="{$userInfo.openid}" />
<input type="hidden" id="nickname" name="nickname" value="{$userInfo.nickname}"  />
<input type="hidden" id="headimg" name="headimg" value="{$userInfo.headimgurl}"  />

<input type="hidden" id="kf_account" name="kf_account" value="{$kf_account}" />
<input type="hidden" id="kf_headimg" name="kf_headimg" value="{$kf_headimg}" />

<input type="hidden" id="sTime" name="sTime" value="{$stime}" />

<nav class="navbar inlisthead navbar-fixed-top"> 
<!--  	<h2><span class="glyphicon glyphicon-chevron-left backBtn"></span> 与【{$userInfo.nickname}】聊天中</h2> -->
<h2><span class="glyphicon glyphicon-chevron-left backBtn"></span> 与【<!--{$apt_name}-->{$list_user['num']}的{$list_user['name']}】聊天中</h2> 
</nav>

<nav class="navbar talkfoot navbar-fixed-bottom">
<!--
<div class="toolbar">
      <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
	  <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>
	  <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
	  <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
  </div> 
-->
<div class="sendbox">
  	<input id="sendText" type="text" placeholder="请输入信息" />
 	<span id="sendbtn" class="glyphicon glyphicon-send" aria-hidden="true"></span>
  </div> 
</nav>

<div id="talklistbox">
	<dl><!--
		<dd class="l_me">
			<em style="background-image:url(/Public/index/image/i_ico.jpg)"></em>
			<p><i></i>我发送的</p> 
		</dd>
		<dd class="l_you">
			<em style="background-image:url(/Public/index/image/y_ico.jpg)"></em>
			<p><i></i>别人发送的</p> 
		</dd>
-->	</dl>
</div>

<span id="closeBtn"></span>

<div style="clear:both"></div>
<script language="javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script language="javascript"> 
var openid = $('#openid').val();
var nickname = $('#nickname').val();
var headimg = $('#headimg').val();

var kf = $('#kf_account').val();
var kfimg = $('#kf_headimg').val();

var stime = $('#sTime').val();

var isBak = true;

wx.config({
    debug: false, 
    appId: '',  
    timestamp: 1211, 
    nonceStr: '', 
    signature: '', 
    jsApiList: [] 
});
wx.ready(function(){});

$(function(){
	$('#sendbtn').on('click',function(){
		var content = $('#sendText').val();
		$('#sendText').val('');
		if(content.length<1) return false;
		sendMes(content);
	});  
	getMesTimer();  
	
	$('#closeBtn').click(function(){
		var url = '/index.php/Kefu/closeSession/openid/{$userInfo.openid}';
		$.getJSON(url,function(obj){
			if(obj.s){ 
				alert(obj.m);
				wx.closeWindow();
			}
		})
	});
	
	$('.backBtn').click(function(){
		location.href = '/index.php/Kefu/inlist';
	});
});

function getMesTimer(){
	var tm = setInterval(function(){
		if(isBak){
			getmesLog();
		}
	},2000);
}

function getmesLog(){
	isBak = false;
	var url = '/index.php/Kefu/getMesLog';
	var parm = {'openid':openid,'stime':stime};
	$.post(url,parm,function(obj){
		isBak = true;
		if(obj.s){
			
			$.each(obj.d.result,function(i,od){
				showInMes(od);
			});
			
			$('#sTime').val(obj.d.endtime);
			stime = obj.d.endtime;
			
		}else{
			console.log(obj);
		}
	},'json');
}

function showInMes(obj){
	var html = '';
	if(obj.opercode == 2002){
		html = '<dd class="l_me"><em style="background-image:url('+kfimg+')"></em><p><i></i>'+obj.text+'</p></dd>';
	}else{
		html = '<dd class="l_you"><em style="background-image:url('+headimg+')"></em><p><i></i>'+obj.text+'</p></dd>';
	}
	$('#talklistbox dl').append(html);
	$(window).scrollTop($('body').height()+20);
}

/* 发送信息 */
function sendMes(content){
	var url = '/index.php/Kefu/sendMes';
	var parm = { 'openid':openid,'content':content } ;
	$.post(url,parm,function(obj){
		if(obj.s){
		}else{
			alert(obj.m);
		}
	},'json');
}

</script>
</body>
</html>